import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';

// 引入图标
import cookbookIcon from '@/images/cookbook.png'
import cookbookActiveIcon from '@/images/cookbook-active.png'
import categoryIcon from '@/images/category.png'
import categoryActiveIcon from '@/images/category-active.png'
import newsIcon from '@/images/news.png'
import newsActiveIcon from '@/images/news-active.png'
import centerIcon from '@/images/center.png'
import centerActiveIcon from '@/images/center-active.png'

// 显示的组件
import Cookbook from '@/pages/Cookbook';


class PageFooterNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'cookbook',
    };
  }
  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#333"
          barTintColor="white"
          hidden={this.props.showHide}
        >
          <TabBar.Item
            title="菜谱"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActiveIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            onPress={() => {
              this.setState({
                selectedTab: 'cookbook',
              });
            }}
          >
            <Cookbook />
          </TabBar.Item>
          <TabBar.Item
            title="分类"
            key="category"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${categoryIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${categoryActiveIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'category'}
            onPress={() => {
              this.setState({
                selectedTab: 'category',
              });
            }}
          >
            <div>分类页面</div>
          </TabBar.Item>
          <TabBar.Item
            title="资讯"
            key="news"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${newsIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${newsActiveIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'news'}
            onPress={() => {
              this.setState({
                selectedTab: 'news',
              });
            }}
          >
            <div>新闻页面</div>
          </TabBar.Item>
          <TabBar.Item
            title="个人"
            key="center"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${centerIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${centerActiveIcon}) center center /  21px 21px no-repeat`
            }}
            />
            }
            selected={this.state.selectedTab === 'center'}
            onPress={() => {
              this.setState({
                selectedTab: 'center',
              });
            }}
          >
            <div>个人中心</div>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }

}

export default PageFooterNav;
